<template>
    <div class="form">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-model-item label="项目名称" prop="name">
                <a-input
                    v-model="form.name"
                    :maxLength="20"
                    placeholder="请输入项目名称"
                    v-if="!isDetail"
                    :disabled="isDetail"
                ></a-input>
                <p class="form-detail-text" v-else>{{ form.name }}</p>
            </a-form-model-item>
            <a-form-model-item label="招商方向" prop="type">
                <el-cascader
                    v-model="form.type"
                    :options="typeList"
                    placeholder="请选择招商方向"
                    ref="typeCascader"
                    size="small"
                    :disabled="isDetail"
                    clearable
                    :props="{ label: 'name', value: 'id', children: 'children', multiple: true }"
                ></el-cascader>
                <p class="multiple-tip">多选,最多允许选择10个。如超出10个则只会保存前10个选项。</p>
            </a-form-model-item>
            <a-form-model-item label="区域" prop="cityCode">
                <city-cascader v-model="form.cityCode" :disabled="isDetail" :chooseEvery="false"></city-cascader>
            </a-form-model-item>
            <a-form-model-item label="项目地址" prop="address">
                <a-button @click="mapShow" :disabled="isDetail" class="w435">
                    {{ form.address || '请选择项目地址' }}
                    <a-icon type="environment" @click="mapShow" />
                </a-button>
            </a-form-model-item>
            <a-form-model-item label="项目阶段" prop="projectStage">
                <a-select
                    v-model="form.projectStage"
                    :disabled="isDetail"
                    :allowClear="true"
                    placeholder="请选择项目阶段"
                >
                    <a-select-option value="未开发">未开发</a-select-option>
                    <a-select-option value="开发中">开发中</a-select-option>
                    <a-select-option value="已开发">已开发</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="目标城市" prop="targetCity">
                <city-cascader-multiple
                    v-model="form.targetCity"
                    :chooseEvery="false"
                    :disabled="isDetail"
                    placeholder="省/市"
                    :maxLevel="2"
                ></city-cascader-multiple>
                <p class="multiple-tip">多选,最多允许选择10个。如超出10个则只会保存前10个选项。</p>
            </a-form-model-item>
            <a-form-model-item label="目标行业" prop="targetIndustry">
                <el-cascader
                    v-model="form.targetIndustry"
                    :options="industryList"
                    placeholder="请选择目标行业"
                    ref="industryCascader"
                    size="small"
                    :disabled="isDetail"
                    clearable
                    :props="{ label: 'name', value: 'id', children: 'children', multiple: true }"
                ></el-cascader>
                <p class="multiple-tip">多选,最多允许选择10个。如超出10个则只会保存前10个选项。</p>
            </a-form-model-item>
            <a-form-model-item label="项目介绍" prop="description" class="description-form-item">
                <a-textarea
                    v-model="form.description"
                    placeholder="您可以填写项目介绍或招商需求等"
                    :disabled="isDetail"
                    :rows="4"
                    :maxLength="500"
                />
                <span class="length-tips">{{ form.description.length }}/500</span>
            </a-form-model-item>
            <a-form-model-item label="图片" prop="imgList" class="img-input">
                <p class="size">图片格式：支持jpg/jpeg/png格式，大小不超过6M，最多6张图片</p>
                <custom-upload
                    v-if="!isDetail"
                    :typeList="['image/jpeg', 'image/png', 'image/bmp']"
                    path="need-manage/img"
                    :max="6"
                    :fileSize="6"
                    btnText="上传图片"
                    v-model="form.imgList"
                    :customBeforeUpload="beforeUpload"
                ></custom-upload>
                <div class="img-box" v-else>
                    <template v-for="(item, index) in form.imgList">
                        <img
                            :src="$staticUrl + '/' + item"
                            alt=""
                            :key="index"
                            @click="showPicturesModal(item, form.imgList)"
                        />
                    </template>
                </div>
            </a-form-model-item>
            <a-form-model-item label="视频" class="video-input">
                <p class="tips">仅支持上传一段视频，视频大小不超过50M</p>
                <custom-video-upload v-model="form.videoList" path="/need-manage/video/"></custom-video-upload>
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" @click="nextStep" class="next-btn">下一步</a-button>
            </a-form-model-item>
        </a-form-model>
        <map-location :isShow="show" @Mapok="handleChange" @hide="hide" :cityInfo="cityInfo" />
    </div>
</template>

<script>
import { getWidthHeight } from '@/plugins/tools'
import CityCascader from '~/components/city-cascader'
import CityCascaderMultiple from '~/components/city-cascader-multiple'
import MapLocation from '~/components/map-location'

export default {
    // 招商需求
    name: 'MerchantsForm',
    components: {
        CityCascader,
        CityCascaderMultiple,
        MapLocation
    },
    model: {
        prop: 'allForm',
        event: 'change'
    },
    props: {
        allForm: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data () {
        return {
            form: {
                // 项目名称
                name: '',
                // 需求类型
                type: [],
                // 区域
                cityCode: '',
                // 项目地址
                address: '',
                cityInfo: {
                    address: '',
                    latitude: '',
                    longitude: '',
                    province: '',
                    city: '',
                    area: ''
                },
                // 项目阶段
                projectStage: undefined,
                // 目标城市
                targetCity: [],
                // 目标行业
                targetIndustry: [],
                // 补充描述
                description: '',
                // 图片
                imgList: [],
                // 视频
                videoList: {
                    videoUrl: '',
                    imgCoverUrl: ''
                }
            },
            show: false,
            typeList: [],
            industryList: [],
            rules: {
                name: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                    { max: 20, message: '最多可输入20个字符', trigger: 'change' }
                ],
                type: [{ required: true, message: '请选择需求类型', trigger: 'change' }],
                cityCode: [{ required: true, message: '请选择区域', trigger: 'change' }],
                address: [{ required: true, message: '请选择项目地址', trigger: 'change' }],
                description: [{ required: true, max: 500, message: '最多可输入500个字符', trigger: 'change' }],
                imgList: [{ required: true, message: '请上传图片', trigger: 'change' }]
            }
        }
    },
    computed: {
        cityInfo () {
            const { address, latitude, longitude, province, city, area } = this.form.cityInfo
            return { address, latitude, longitude, province, city, area }
        },
        isDetail () {
            return !!this.$route.query.d
        }
    },
    watch: {
        allForm: {
            deep: true,
            handler (val) {
                this.form = {
                    ...this.form,
                    ...val
                }
            }
        }
    },
    created () {
        this.getTypeList()
        this.getProductList()
    },
    mounted () {},
    methods: {
        mapShow () {
            this.show = true
        },
        async getProductList () {
            const res = await this.$ApiServer['need/getProductList']()
            if (res.code === 200) {
                this.industryList = res.data
            }
        },
        async getTypeList () {
            const res = await this.$ApiServer['need/getTypeList']()
            if (res.code === 200) {
                this.typeList = res.data
            }
        },
        handleChange (data) {
            this.form.address = data.address
            this.form.cityInfo = {
                address: data.address,
                latitude: data.latitude,
                longitude: data.longitude,
                province: data.province,
                city: data.city,
                area: data.area
            }
            this.show = false
        },
        hide () {
            this.show = false
        },
        nextStep () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$emit('change', {
                        ...this.allForm,
                        ...this.form,
                        currentStep: 1,
                        typeCascader: this.$refs.typeCascader
                            .getCheckedNodes(true)
                            .map(item => [item.parent.data.name, item.data.name]),
                        industryCascader: this.$refs.industryCascader
                            .getCheckedNodes(true)
                            .map(item => [item.parent.data.name, item.data.name])
                    })
                }
            })
        },
        beforeUpload (file) {
            return new Promise((resolve) => {
                getWidthHeight(file).then((res) => {
                    resolve(true)
                    // if ((res.width <= 1024) && (res.height <= 1024)) {
                    //     resolve(true)
                    // } else {
                    //     this.$message.error('请上传指定尺寸的图片')
                    // }
                })
            })
        },
        // 预览大图
        showPicturesModal (url, urls) {
            if (urls.length) {
                this.$picturesModal({
                    url,
                    urls
                })
            }
        }
    }
}
</script>

<style scoped lang="less">
.form {
    width: 600px;
    padding-left: 20px;
    padding-top: 1px;
    padding-bottom: 40px;
    position: relative;
    .next-btn {
        margin-left: 150px;
    }
    .multiple-tip {
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        color: #666;
        margin: 0;
    }
    .img-input {
        .size {
            font-size: 12px;
            font-weight: 400;
            line-height: 17px;
            color: @primary-color;
            margin-bottom: 6px;
            padding-top: 11px;
        }
        ::v-deep {
            .ant-upload-select {
                width: 200px;
                height: 150px;
                background: #fff;
                border: 1px solid #d4d4d4;
                &:hover {
                    border: 1px solid @primary-color;
                    .anticon {
                        color: @primary-color;
                    }
                    .ant-upload-text {
                        color: @primary-color;
                    }
                }
                .anticon {
                    font-size: 42px;
                    color: #666;
                }
                .ant-upload-text {
                    font-size: 14px;
                    color: #666;
                }
            }
            .ant-upload-list-picture-card-container {
                width: 200px;
                height: 150px;
            }
            .ant-upload-list-picture-card .ant-upload-list-item {
                width: 200px;
                height: 150px;
            }
            .ant-upload-picture-card-wrapper {
                width: 630px;
            }
        }
    }

    .video-input {
        .tips {
            font-size: 12px;
            font-weight: 400;
            line-height: 17px;
            color: @primary-color;
            margin-bottom: 6px;
            padding-top: 11px;
        }
        ::v-deep {
            .upload-box {
                width: 200px;
                height: 150px;
            }
        }
    }
}
.img-box {
    img {
        width: 150px;
        height: 150px;
        margin-right: 10px;
        cursor: pointer;
        object-fit: contain;
    }
}

.w435 {
    width: 435px;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    ::v-deep {
        span {
            width: 380px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
        }

        .anticon-environment {
            color: @primary-color;
        }
    }
}
</style>
